<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxdemo</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">


<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
//使用Ajax进行验证
function checkUnique_my() {
	//1.创建一个XML HttpRequest代理对象

	var xmlhttp;
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2.建立请求链接
	var url = "AjaxDemoAction?adminname="+document.getElementById("txtUserName").value;
	
	xmlhttp.open("get", url, true); //true 是异步，false是同步，模式是同步
	//发送请求
	//发送的数据形式为: 变量=变量值&变量名=变量值。。。
	//注意：如果需要直接将表单的值映射给实体类的属性，则需要发送的变量名和实体类的属性名一致
	//组织发送的数据
	// var data = ...;
	xmlhttp.send(null);
	// 3. 回调处理
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			// 使用dom操作进行html页面局部刷新
			//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			//获取服务影响的文本内容
			var txtMsg = xmlhttp.responseText;
			alert(txtMsg);
		}
	}

}




//使用ajax进行验证-get
function checkUnique_get() {
	// 1、创建一个XMLHttpRequest代理对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 2、建立请求连接
	var url = "AjaxDemoAction?adminname="+document.getElementById("txtUserName").value;
	xmlhttp.open("get", url, true); // ture是异步，false是同步；默认是true；
	// 发送请求
	// 发送的数据形式为：变量名=变量值&变量名=变量值... 
	// 注意：如果需要直接将表单的值映射给实体类的属性，则需要发送的变量名和实体类的属性名一致
	// 组织发送的数据
	//var data = ...;
	xmlhttp.send(null);

	// 3、回调处理
	// 会调用函数
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			// 使用dom操作进行html页面局部刷新
			//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			//获取服务影响的文本内容
			var txtMsg = xmlhttp.responseText;
			alert(txtMsg);
		}
	}
}
	
	////////////////////////////////////////////////////////////////////
	// 使用ajax进行验证-post
	function checkUnique_post() {
		// 1、创建一个XMLHttpRequest代理对象
		var xmlhttp;
		if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {
			// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		// 2、建立请求连接
		var url = "AjaxDemoAction";
		xmlhttp.open("post", url, true); // ture是异步，false是同步；默认是true；
		// 发送请求
		// 设置header头格式
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// 发送的数据形式为：变量名=变量值&变量名=变量值... 
		// 注意：如果需要直接将表单的值映射给实体类的属性，则需要发送的变量名和实体类的属性名一致		
		// 组织发送的数据
		var data = "adminname="+document.getElementById("txtUserName").value;
		xmlhttp.send(data);

		// 3、回调处理
		// 会调用函数
		xmlhttp.onreadystatechange = function() {
			// 清除上一次遗留内容
			document.getElementById("userMsg").innerHTML = "";
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				// 4和200表示ajax的请求已经成功
				
				// 使用dom操作进行html页面局部刷新
				// 获取服务影响的文本内容
				var txtMsg = xmlhttp.responseText;
				//alert(txtMsg);
				document.getElementById("userMsg").innerHTML = txtMsg;
			}
		}
	}
	
	
	
	
	
function checkUnique_jquery(){
	// 使用jquery进行ajax请求处理
	$.ajax({
		   type: "POST",  // 请求类性
		   url: "AjaxDemoAction", // 请求的url
		   data: $("#forma1").serialize() , // 发送的数据 使用serialize方法替代手动拼写数据串
		   //dataType:text, // 响应发挥的数据类型  
		   success: function(data, textStatus, jqXHR){ // 执行成功之后的回调函数
		     // 回调函数的dom操作
		     $("#userMsg").html(data+"--"+textStatus);
		   	console.info(jqXHR);
		   },
		   error:function(data){
			   alert("请求失败"+data);
		   }
		});
}
	
</script>

</head>
<body>
	<form id="forma1" class="form-horizontal" action="LoginAction" method="post">
		<div class="form-group" style="margin-top: 100px;">
			<label class="col-sm-2 control-label col-sm-offset-3">用户名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="adminname" placeholder="请输入用户名">
			</div>
			<label class="col-sm-2 control-label" id="userMsg"></label>
		
		</div>
		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-2">
				<button type="button" class="btn btn-default" onclick="checkUnique_jquery()">唯一性验证</button>
				
			</div>

		</div>
	</form>

</body>
</html>